第22天：待辦事項 App CSS 美化

今天是我參加 IT 鐵人賽的第二十二天，我決定為待辦事項應用程式添加 CSS 樣式，確保應用程式的外觀美觀且易於使用。這是我從影片裡一起學習製作的簡單待辦事項應用程式，並且能夠幫助我鞏固所學的知識。

一開始，我設計了應用程式的基本結構，並使用 HTML 來構建應用程式的結構。再來，我使用 CSS 來設置基本的樣式，確保應用程式的外觀美觀且易於使用。

以下是影片實作中的 CSS 編碼：

/* 設定網頁背景顏色和排版 */
body {
    background-color: #00c787; /* 背景顏色 */
    display: flex; /* 使用 flex 排版 */
    justify-content: center; /* 內容水平置中 */
}

/* 操作面板的樣式 */
.操作面板 {
    background-color: white; /* 背景顏色 */
    width: 300px; /* 寬度 */
    padding: 30px; /* 內邊距 */
    margin-top: 50px; /* 上邊距 */
    border-radius: 20px; /* 圓角 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 陰影效果 */
}

/* 輸入區域的樣式 */
.輸入區域 {
    display: flex; /* 使用 flex 排版 */
    border-radius: 25px; /* 圓角 */
    overflow: hidden; /* 隱藏溢出的內容 */
}

/* 文字欄的樣式 */
.文字欄 {
    flex-grow: 1; /* 佔據剩餘空間 */
    border: none; /* 無邊框 */
    background-color: #F0F4F8; /* 背景顏色 */
    padding: 10px 15px; /* 內邊距 */
    outline: none; /* 無外框 */
}

/* 按鈕的樣式 */
.按鈕 {
    background-color: #00c787; /* 背景顏色 */
    border: none; /* 無邊框 */
    color: white; /* 文字顏色 */
    padding: 10px 15px; /* 內邊距 */
    cursor: pointer; /* 滑鼠指標變為指針 */
}

/* 清單的樣式 */
.清單 {
    list-style-type: none; /* 無項目符號 */
    padding: 0; /* 無內邊距 */
}

/* 清單項目的樣式 */
.清單 li {
    display: flex; /* 使用 flex 排版 */
    padding: 10px 0; /* 上下內邊距 */
    border-bottom: 1px solid #eee; /* 底部邊框 */
}

/* 清單標籤的樣式 */
.清單 label {
    flex-grow: 1; /* 佔據剩餘空間 */
}

/* 打勾方塊的樣式 */
.打勾方塊 {
    margin-right: 15px; /* 右邊距 */
}

/* 垃圾桶按鈕的樣式 */
.垃圾桶 {
    background-color: none; /* 無背景顏色 */
    border: none; /* 無邊框 */
    cursor: pointer; /* 滑鼠指標變為指針 */
    opacity: 0.5; /* 透明度 */
}

/* 當滑鼠懸停在垃圾桶按鈕上時的樣式 */
.垃圾桶:hover {
    opacity: 1; /* 透明度變為 1 */
}

這段 CSS 編碼設置了應用程式的基本樣式，包括背景顏色、佈局、邊距、填充和邊框等。通過這些樣式設置，我確保了應用程式的外觀美觀且易於使用。

今天的學習讓我對 CSS 的應用有了更深入的理解，並且能夠運用所學的技術來美化我的待辦事項應用程式。我期待在接下來的日子裡，能夠學習更多關於 CSS 和前端開發的知識，並將它們應用到我的衛教網站中。